import { G2, Chart, Line, Legend, Area, Point, Axis } from 'bizcharts';
import { Card } from 'antd';

const data = [
  {
    x: '2021-01',
    y: 110.54633,
    type: '金盾俊园',
  },
  {
    x: '2021-01',
    y: 149.14517,
    type: '呈贡片区',
  },
  {
    x: '2021-02',
    y: 111.66953,
    type: '金盾俊园',
  },
  {
    x: '2021-02',
    y: 43.54091,
    type: '呈贡片区',
  },
  {
    x: '2021-03',
    y: 96.96923,
    type: '金盾俊园',
  },
  {
    x: '2021-03',
    y: 91.19037,
    type: '呈贡片区',
  },
  {
    x: '2021-04',
    y: 55.97505,
    type: '金盾俊园',
  },
  {
    x: '2021-04',
    y: 76.57695,
    type: '呈贡片区',
  },
  {
    x: '2021-05',
    y: 97.25487,
    type: '金盾俊园',
  },
  {
    x: '2021-05',
    y: 95.98427,
    type: '呈贡片区',
  },
  {
    x: '2021-06',
    y: 55.09319,
    type: '金盾俊园',
  },
  {
    x: '2021-06',
    y: 77.76219,
    type: '呈贡片区',
  },
  {
    x: '2021-07',
    y: 108.34361,
    type: '金盾俊园',
  },
  {
    x: '2021-07',
    y: 69.77475,
    type: '呈贡片区',
  },
  {
    x: '2021-08',
    y: 46.81322,
    type: '金盾俊园',
  },
  {
    x: '2021-08',
    y: 80.24458,
    type: '呈贡片区',
  },
  {
    x: '2021-09',
    y: 90.24424,
    type: '金盾俊园',
  },
  {
    x: '2021-09',
    y: 124.97207,
    type: '呈贡片区',
  },
  {
    x: '2021-10',
    y: 97.57597,
    type: '金盾俊园',
  },
  {
    x: '2021-10',
    y: 68.99066,
    type: '呈贡片区',
  },
  {
    x: '2021-11',
    y: 82.44748,
    type: '金盾俊园',
  },
  {
    x: '2021-11',
    y: 80.80649,
    type: '呈贡片区',
  },
  {
    x: '2021-12',
    y: 113.90383,
    type: '金盾俊园',
  },
  {
    x: '2021-12',
    y: 92.80536,
    type: '呈贡片区',
  },
];

const scale = {
  y: { min: 0 },
};

const CommunityPriceIndexLine = (props) => {
  return (
    <>
      <Chart
        height={240}
        padding={[20, 10, 40, 10]}
        data={data}
        autoFit
        scale={scale}
        defaultInteractions={[]}
      >
        <Point position="x*y" color="type" shape="circle" />
        <Line position="x*y" color="type" />
        <Legend itemName={{ style: { fill: 'white' } }} />
        <Axis name="y" grid={null} label={null} />
        <Axis
          name="x"
          grid={null}
          tickLine={null}
          label={{
            style: {
              fill: 'white', // 文本的颜色
            },
          }}
        />
      </Chart>
    </>
  );
};
export default CommunityPriceIndexLine;
